<template>
  <div v-if="show" class="widget-config-container">
    <el-form label-position="top">
      <el-form-item label="字段标识" v-if="props.data.type != 'grid'">
        <el-input v-model="data.key"></el-input>
      </el-form-item>
      <el-form-item label="标题" v-if="data.type != 'grid'">
        <el-input v-model="data.name" clearable></el-input>
      </el-form-item>
      <el-form-item label="文字内容" v-if="data.type == 'text'">
        <el-input v-model="data.options.defaultValue" clearable></el-input>
      </el-form-item>
      <el-form-item
        label="宽度"
        v-if="Object.keys(data.options).indexOf('width') >= 0"
      >
        <el-input v-model="data.options.width"></el-input>
      </el-form-item>
      <el-form-item
        label="高度"
        v-if="Object.keys(data.options).indexOf('height') >= 0"
      >
        <el-input v-model="data.options.height"></el-input>
      </el-form-item>
      <el-form-item
        label="标签大小"
        v-if="Object.keys(data.options).indexOf('size') >= 0"
      >
        宽度
        <el-input
          style="width: 90px"
          type="number"
          v-model.number="data.options.size.width"
        ></el-input>
        高度
        <el-input
          style="width: 90px"
          type="number"
          v-model.number="data.options.size.height"
        ></el-input>
      </el-form-item>
      <el-form-item
        label="占位内容"
        v-if="
          Object.keys(data.options).indexOf('placeholder') >= 0 &&
          (data.type != 'time' || data.type != 'date')
        "
      >
        <el-input v-model="data.options.placeholder"></el-input>
      </el-form-item>
      <el-form-item
        label="布局方式"
        v-if="Object.keys(data.options).indexOf('inline') >= 0"
      >
        <el-radio-group v-model="data.options.inline" size="small">
          <el-radio-button :label="false">块级</el-radio-button>
          <el-radio-button :label="true">行内</el-radio-button>
        </el-radio-group>
      </el-form-item>
      <el-form-item
        label="显示输入值"
        v-if="Object.keys(data.options).indexOf('showInput') >= 0"
      >
        <el-switch v-model="data.options.showInput"></el-switch>
      </el-form-item>
      <el-form-item
        label="最小值"
        v-if="Object.keys(data.options).indexOf('min') >= 0"
      >
        <el-input-number
          v-model="data.options.min"
          :min="0"
          :max="100"
          :step="1"
        ></el-input-number>
      </el-form-item>
      <el-form-item
        label="最大值"
        v-if="Object.keys(data.options).indexOf('max') >= 0"
      >
        <el-input-number
          v-model="data.options.max"
          :min="0"
          :max="100"
          :step="1"
        ></el-input-number>
      </el-form-item>
      <el-form-item
        label="步长"
        v-if="Object.keys(data.options).indexOf('step') >= 0"
      >
        <el-input-number
          v-model="data.options.step"
          :min="0"
          :max="100"
          :step="1"
        ></el-input-number>
      </el-form-item>
      <el-form-item
        label="是否多选"
        v-if="data.type == 'select' || data.type == 'imgupload'"
      >
        <el-switch
          v-model="data.options.multiple"
          @change="handleSelectMuliple"
        ></el-switch>
      </el-form-item>
      <el-form-item label="是否可搜索" v-if="data.type == 'select'">
        <el-switch v-model="data.options.filterable"></el-switch>
      </el-form-item>
      <el-form-item
        label="允许半选"
        v-if="Object.keys(data.options).indexOf('allowHalf') >= 0"
      >
        <el-switch v-model="data.options.allowHalf"> </el-switch>
      </el-form-item>
      <el-form-item
        label="支持透明度选择"
        v-if="Object.keys(data.options).indexOf('showAlpha') >= 0"
      >
        <el-switch v-model="data.options.showAlpha"> </el-switch>
      </el-form-item>
      <el-form-item
        label="隐藏标签"
        v-if="Object.keys(data.options).indexOf('showLabel') >= 0"
      >
        <el-switch v-model="data.options.showLabel"> </el-switch>
      </el-form-item>
      <template v-if="data.type == 'time' || data.type == 'date'">
        <!-- <el-form-item label="显示类型" v-if="data.type == 'date'">
          <el-select v-model="data.options.type">
            <el-option value="year"></el-option>
            <el-option value="month"></el-option>
            <el-option value="date"></el-option>
            <el-option value="dates"></el-option>
            <el-option value="datetime"></el-option>
            <el-option value="datetimerange"></el-option>
            <el-option value="daterange"></el-option>
          </el-select>
        </el-form-item> -->
        <el-form-item label="是否为区间选择" v-if="data.type == 'time'">
          <el-switch v-model="data.options.isRange"> </el-switch>
        </el-form-item>
        <!--<el-form-item label="是否获取时间戳" v-if="data.type == 'date'">
          <el-switch v-model="data.options.timestamp"> </el-switch>
        </el-form-item>
        <el-form-item
          label="占位内容"
          v-if="
            (!data.options.isRange && data.type == 'time') ||
            (data.type != 'time' &&
              data.options.type != 'datetimerange' &&
              data.options.type != 'daterange')
          "
        >
          <el-input v-model="data.options.placeholder"></el-input>
        </el-form-item>
        <el-form-item
          label="开始占位符"
          v-if="
            data.options.isRange ||
            data.options.type == 'datetimerange' ||
            data.options.type == 'daterange'
          "
        >
          <el-input v-model="data.options.startPlaceholder"></el-input>
        </el-form-item>
        <el-form-item
          label="结束占位符"
          v-if="
            data.options.isRange ||
            data.options.type == 'datetimerange' ||
            data.options.type == 'daterange'
          "
        >
          <el-input v-model="data.options.endPlaceholder"></el-input>
        </el-form-item> 
        <el-form-item label="格式">
          <el-input v-model="data.options.format"></el-input>
        </el-form-item>-->
        <!-- <el-form-item
          label="默认值"
          v-if="
            data.type == 'time' &&
            Object.keys(data.options).indexOf('isRange') >= 0
          "
        >
          <el-time-picker
            style="width: 100%"
            type="datetimerange"
            v-if="!data.options.isRange"
            v-model="data.options.defaultValue"
            :arrowControl="data.options.arrowControl"
            :value-format="data.options.format"
          >
          </el-time-picker>
        </el-form-item> -->
      </template>
    </el-form>
  </div>
</template>

<script setup>
import { ref, computed } from "vue";

const props = defineProps({
  data: {
    type: Object,
  },
});

const show = computed(() => {
  if (props.data && Object.keys(props.data).length > 0) {
    return true;
  }
  return false;
});
</script>
<style lang="scss" scoped>
.widget-config-container {
  padding: 0 10px;
}
</style>
>
